<script setup>
import {ref} from 'vue'
import axios from 'axios';
import { RouterLink } from 'vue-router';
import { useMenuStore } from '@/stores/menu'; 
// import { eventBus } from '@/components/eventBus';
import { nextTick } from 'vue';
let menu = ref({});
let obj = useMenuStore();
    axios.get('/api/menu').then(res=>{    
    let list = res.data;
    for(let i=0;i<list.length;i++){
        if(list[i].pid==0){
            menu.value[list[i].id] = list[i];
            menu.value[list[i].id].open = false;
            menu.value[list[i].id].children=[];
        }
    }
    for(let i=0;i<list.length;i++){
        if(list[i].pid!=0){
            menu.value[list[i].pid].children.push(list[i]);
        }
    }
    console.log(ref)
})
function doopen(index){
    let dianji = menu.value[index];
   if(dianji){
    dianji.open=!dianji.open;
   }
}
function sel(id){
    menulist.value.forEach(item=>{
        if(item.id==id){
            item.checked = true;
            addTab(item);
            router.push(item.path)
        }else{
            item.checked = false;
        }
    })
}
async function addTab(menu) {
    tabs.addTab(menu);
    await nextTick();
    eventBus.emit('tw');
}
</script>

<template>
    <ul class="menu">
        <li v-for="(item,index) in menu" :key="index">
            <div class="parent" @click="doopen(item.id)">
                <img :src="'/src/assets/img/'+item.icon" width="15px" height="15px" alt="">
                <router-link :to="item.path" class="ww" @click="obj.addTab(item)">{{ item.title }}</router-link>
            </div>
            <ul class="child" v-show="item.open">
                <li v-for="it in item.children" :key="it.id"  @click="sel(it.id)" :style="it.checked?'background-color:#0BB;':''">
                    <img :src="'/src/assets/img/'+item.icon" width="15px" height="15px" alt="">
                    <router-link @click="obj.addTab(it)">{{ it.title }}</router-link>
                </li>
            </ul>
        </li>
    </ul>
</template>

<style scoped>
.ww{
    color: white;
    user-select: none;
}
.menu{
    width: 180px;
    /* background-color:rgb(57, 62, 74); */
    display: flex;
    flex-direction: column;
    padding: 15px;
    /* margin-left: -20px; */
}
.menu li{
    min-height: 40px;
    line-height: 40px;
    padding: 5px;
}
.child{
    background-color: rgb(57, 62, 74);
    color: white;
    background-color: #000;
    list-style: none;
}
.parent{
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
    width: 500px;
    display: flex;
    line-height: 30px;
    padding: 10px;
    user-select: none;
}
.menu{
    list-style: none;
}
</style>
